<template>
  <div class="pages deliveryOrderLook">
    <!-- 操作框 -->
    <div class="tableSearch">
      <el-button type="primary" @click="goBack()" size="mini">返回</el-button>
      <el-button
        type="primary"
        v-if="setRole('退货确认')"
        v-show="isx"
        @click="updateOrderGoods(2)"
        size="mini"
      >确认退货</el-button>
      <el-button
        type="primary"
        v-if="setRole('退货确认')"
        v-show="isx"
        @click="updateOrderGoods(1)"
        size="mini"
      >驳回退货</el-button>
      <!-- 6/24新加功能应收应付里的退货退款 -->
      <el-button
        type="primary"
        v-if="setRole('确认收货')"
        v-show="receipt"
        @click="returnOrderGoods()"
        size="mini"
      >确认收货</el-button>
    </div>
    <!-- 表单 -->
    <el-form :model="formdata" ref="formdata" label-width="120px" size="mini">
      <el-row>
        <el-col :span="8">
          <el-form-item label="仓库：" prop="warehouseName">
            <el-input v-model="formdata.warehouseName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="企业客户：" prop="shopName">
            <el-input v-model="formdata.shopName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据日期：" prop="orderDate">
            <el-date-picker
              v-model="formdata.orderDate"
              format="yyyy年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="date"
              disabled
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单状态：">
            <el-input v-model="returnStatusArr[formdata.purchaseStatus]" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退货日期：" prop="returnDate">
            <el-date-picker
              v-model="formdata.returnDate"
              format="yyyy年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="date"
              disabled
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据号：">
            <el-input v-model="formdata.purchaseinCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源单号">
            <el-input v-model="formdata.fromCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 物料表格 -->
    <div class="tableMain">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="25"></el-table-column>
        <el-table-column prop="barCode" label="商品条码" align="center"></el-table-column>
        <el-table-column prop="goodsCode" label="商品货号" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品" align="center"></el-table-column>
        <el-table-column prop="goodsBatchNumber" label="商品批号" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isBatch == '1'">{{scope.row.goodsBatchNumber}}</span>
            <span v-if="scope.row.isBatch == '0'">{{"---"}}</span>
          </template>
        </el-table-column>
        <!-- 集团订单新加功能5/31 -->
        <el-table-column prop="dateInProduced" label="生产日期" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isBatch == '1'">{{scope.row.dateInProduced}}</span>
            <span v-if="scope.row.isBatch == '0'">{{"---"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSpec" label="商品规格" align="center">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsSpec" :key="index">
              <span>{{item.paramName}} :</span>
              <span>{{item.paramValue}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unitName" label="单位" align="center"></el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center"></el-table-column>
        <el-table-column prop="goodsPrice" label="销售价" align="center"></el-table-column>
        <el-table-column prop="goodsAmount" label="总价" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- 价钱计算 -->
    <div class="th-right">
      <el-form :model="formdata" label-width="120px" size="mini">
        <el-row>
          <el-col :span="10">&nbsp;</el-col>
          <el-col :span="6">
            <el-form-item label="备注：">
              <el-input v-model="formdata.remark" type="textarea" maxlength="50" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退货金额：" prop="priceTotal">
              <el-input label-text-align="right" v-model="formdata.returnAmount" disabled></el-input>
            </el-form-item>
            <el-form-item label="运费：" prop="freight">
              <el-input
                v-model="formdata.freight"
                type="text"
                disabled
                min="0"
                onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
              ></el-input>
            </el-form-item>
            <el-form-item label="退货总金额：">
              <el-input v-model="formdata.amount" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import utils from "@/util/state";
import {
  selectOrderGoodsPurchaseReturnDetail,
  confirmOrRejectReturn,
  getReturn
} from "@/api";
export default {
  data() {
    return {
      isx: false,
      receipt: false,
      id: "",
      tableData: [], // 选择的物料数组
      returnStatusArr: utils.returnStatusArr,
      saleStatusArray: ["已生成", "未同意", "已同意"], // 单据状态数组
      returnAmount: 0,
      formdata: {
        fromCode: "",
        purchaseId: "", // 取来源单的单据id
        returnDate: "", // 退货日期
        purchaseStatus: "", // 单据状态
        orderDate: "", // 单据日期
        shopId: "", // 客户id
        shopName: "", // 客户名称
        goodsList: [], // 物料
        creator: "", // 操作人
        remark: "", // 备注
        returnAmount: 0, // 总计
        freight: 0, // 运费
        taxAmount: 0, // 税
        amount: 0 // 实收总计
      }
    };
  },
  computed: {
    ...mapState({
      power: state => state.power
    })
  },
  mounted() {
    this.id = util.getQuery("id");
    this.getDataById(this.id); // 查看该订单详情
  },
  methods: {
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 点击返回按钮
    goBack() {
      history.back();
    },
    // 查看时根据id获取详情
    getDataById(goodsSaleId) {
      let data = {
        id: goodsSaleId
      };
      selectOrderGoodsPurchaseReturnDetail(data).then(res => {
        this.formdata.shopName = res.data.shopName;
        this.formdata.orderDate = util.foryear(res.data.orderDate);
        this.formdata.purchaseStatus = res.data.purchaseStatus;
        this.formdata.returnDate = util.foryear(res.data.returnDate);
        this.formdata.purchaseinCode = res.data.purchaseinCode;
        this.formdata.fromCode = res.data.fromCode;
        this.formdata.remark = res.data.remark;
        this.formdata.freight = res.data.freight;
        this.formdata.amount = res.data.amount;
        this.formdata.returnAmount = res.data.returnAmount;
        this.formdata.warehouseName = res.data.warehouseName;
        this.tableData = JSON.parse(JSON.stringify(res.data.goodsList));
        // for (let i = 0; i < this.tableData.length; i++) {
        //   this.formdata.returnAmount += this.tableData[i].returnAmount;
        // }
        if (this.formdata.purchaseStatus == 0) {
          //订单已生成状态
          this.isx = true;
        }
        if (this.formdata.purchaseStatus == 3) {
          //订单代收货状态
          this.receipt = true;
        }
      });
    },
    // 退货确认
    updateOrderGoods(returnStatus) {
      let data = {
        id: this.id,
        purchaseStatus: returnStatus
      };
      confirmOrRejectReturn(data).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg
          });
          util.routerTo("/order-center/sale-management/sale-deliveryOrder");
        }
      });
    },
    // 确认收货
    returnOrderGoods() {
      getReturn({
        id: this.id
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg
          });
          util.routerTo("/order-center/sale-management/sale-deliveryOrder");
        }
      });
    }
  }
};
</script>
<style scoped>
.th-right {
  margin-top: 20px;
}
</style>
